<!--
 * @Author: FengTeng
 * @Date: 2021-02-19 21:59:56
 * @LastEditTime: 2021-03-03 13:01:46
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\components\modal\rule-detail-modal\RuleDetailModal.vue
-->
<template>
  <div class="rule-detail-modal" :class="{ 'z-index': !modalConfig.visible }">
    <spa-modal :modalConfig="modalConfig" @dialog-close="handleDialogClose()">
      <el-form :rules="ruleDetailConfig.rules" ref="ruleDetailRef" :model="ruleDetailData">
        <el-form-item label="首次消费时间" prop="firstExpendTime">
          <el-input v-model="ruleDetailData.firstExpendTime" :disabled="ruleType.firstExpendTime.disabled"></el-input>
        </el-form-item>
        <el-form-item label="消费金额" prop="expendTotal">
          <el-input v-model="ruleDetailData.expendTotal" :disabled="ruleType.expendTotal.disabled"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="优惠折扣" prop="sale">
          <el-input v-model="ruleDetailData.sale" :disabled="ruleType.sale.disabled"></el-input>
        </el-form-item>
        <el-form-item label="满减额度" prop="reduction">
          <el-input v-model="ruleDetailData.reduction" :disabled="ruleType.reduction.disabled"></el-input>
        </el-form-item>
        <el-form-item label="赠送内容" prop="present">
          <el-input v-model="ruleDetailData.present" :disabled="ruleType.present.disabled"></el-input>
        </el-form-item>
        <el-form-item class="customer-list" label="用户列表" prop="customer-list">
          <div class="customer-info-table">
            <customer-info-table
              :tableData="customerListData"
              :columnSet="customerListColumnSet"
              :tableConfig="customerListConfig"
              @page-change="handlePageChange($event)"
              @customer-detail="handleCustomerDetail($event)"
            ></customer-info-table>
          </div>
        </el-form-item>
        <el-form-item class="form-option-button">
          <el-button type="info" @click="handleCancel()">取消</el-button>
          <el-button type="danger" @click="handleOffShelf()">下架规则</el-button>
          <el-button type="primary" :loading="confirmBtnLoading" @click="handleConfirm()">确定</el-button>
        </el-form-item>
      </el-form>
    </spa-modal>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import SpaModal from "@/components/spa-modal/SpaModal.vue";
import CustomerInfoTable from "@/components/table/customer-info-table/CustomerInfoTable.vue";
import { mapState } from "vuex";
export default {
  name: "RuleDetailModal",
  components: {
    SpaModal,
    CustomerInfoTable
  },
  props: {
    modalConfig: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      ruleDetailConfig: {
        rules: {}
      },
      ruleDetailData: {},
      ruleType: {
        firstExpendTime: {
          disabled: true
        },
        expendTotal: {
          disabled: true
        },
        sale: {
          disabled: true
        },
        reduction: {
          disabled: true
        },
        present: {
          disabled: true
        }
      },
      customerListConfig: {
        // 分页配置
        pageConfig: {
          page: 1,
          pageSize: 10,
          total: 0
        }
      },
      customerListData: [],
      customerListColumnSet: [
        {
          label: "序号",
          prop: "id",
          align: "center"
        },
        {
          label: "联系方式",
          prop: "phone",
          align: "center"
        },
        {
          label: "称呼",
          prop: "chenghu",
          align: "center"
        },
        {
          label: "性别",
          prop: "sex",
          align: "center"
        },
        {
          label: "负责人",
          prop: "cjren",
          align: "center"
        },
        {
          label: "操作",
          prop: "option",
          align: "center",
          customSlot: "customSlot"
        }
      ],
      confirmBtnLoading: false
    };
  },
  computed: {
    ...mapState({
      userPermissions: state => state.permissionModule.permissions
    })
  },
  methods: {
    openModal(event) {
      debugger
      this.ruleDetailData = { ...event };
      this.ruleDetailData.firstExpendTime = event.time + "个月";
      this.requestCustomerTableData();
      this.modalConfig.visible = true;
    },
    handlePageChange(event) {
      console.log("分页器", event);
      this.customerListConfig.pageConfig.page = event;
      this.requestCustomerTableData();
      // 查询
    },
    requestCustomerTableData() {
      /**
       * 下面的注释修改之后可以直接调用
       */
      let that = this;
      $.post(
        apis.getCustomerTableData,
        {
          xiaofeizongjine: this.ruleDetailData.expendTotal,
          pageIndex: this.customerListConfig.pageConfig.page,
          pageSize: this.customerListConfig.pageConfig.pageSize,
          type: "select"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            that.customerListData = [ ...resp.data.tableData ];
            that.customerListConfig.pageConfig.total = resp.data.total;
            that.customerListData.forEach(item => {
              item.option = "查看详情";
            });
          } else {
            this.$message.error(resp.msg);
          }
        }
      );
    },
    handleCustomerDetail(event) {
      console.log("查看用户详情", event);
      // this.$refs.customerDetailModalRef.openModal(event);
      this.$emit("customer-detail", event);
    },
    handleOffShelf() {
      // 下架规则
      if (this.userPermissions.memberInfo.RuleShelf) {
        $.post(
          apis.setRuleStatus,
          {
            id: this.ruleDetailData.id,
            type: "delete"
          },
          resp => {
            resp = JSON.parse(resp);
            if (resp.code === "ok") {
              this.$message.success(resp.msg);
              this.$emit("refresh-table");
            } else {
              this.$message.error(resp.msg);
            }
          }
        );
      } else {
        this.$message.warning("用户没有对应权限！");
      }
    },
    handleCancel() {
      this.modalConfig.visible = false;
      console.log("取消操作");
    },
    handleConfirm() {
      console.log("提交表单");
      this.confirmBtnLoading = true;
      // 调接口
    },
    handleDialogClose() {
      this.resetFormData();
    },
    resetFormData() {
      this.ruleDetailData = {};
      this.confirmBtnLoading = false;
      this.customerListConfig.pageConfig = {
        page: 1,
        pageSize: 10,
        total: 0
      };
      this.$refs.ruleDetailRef && this.$refs.ruleDetailRef.resetFields();
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
